<template>
	<view class="isBFC">
		<view v-if="data.model===1" class="imageNavWrap">
			<view v-for="item in images" :key="item.dataId" @click.stop="onTap(item)">
				<fr-image class="img" mode="widthFix" :src="imgHost+item.pic" loadingIngImg="" />
			</view>
		</view>
		<view v-if="data.model===2" class="imageNavWrap model2">
			<view v-for="item in images" :key="item.dataId" @click.stop="onTap(item)" class="item">
				<fr-image class="img" mode="widthFix" :src="imgHost+item.pic" loadingIngImg="" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from "vue";

	const props = defineProps({
		data: Object,
		imgHost: String,
	})
	const config = props.data;

	const images = computed(() => config.imgData);
	const style = computed(() => {
		let formatStyle = {};
		for (let key in config.style) {
			formatStyle[key] = config.style[key] + 'px';
		}
		return formatStyle;
	})

	const onTap = (info) => {
		const { dataId: id, urlType: type } = info;
		if (!id) return;
		uni.navigateTo({
			url: [null, `/pages/article/article?id=${id}&title=文章详情`,
				`/pages/productDetail/productDetail?id=${id}`
			][
				Number(type)
			],
		})
	}
</script>

<style lang="scss">
	.imageNavWrap {
		overflow: hidden;
		margin-bottom: v-bind('style.marginBottom');
		margin-left: v-bind('style.marginLeft');
		margin-right: v-bind('style.marginRight');
		margin-top: v-bind('style.marginTop');
		border-radius: v-bind('style.borderRadius');

		.img {
			display: flex;
			width: 100%;
			border-radius: v-bind('style.borderRadius');
			overflow: hidden;
		}
	}

	.model2 {
		display: flex;
		justify-content: space-between;

		.item {
			width: 49%;
		}
	}
</style>